<ul nz-menu nzMode="inline" nzTheme="dark">
  <ng-container
    *ngTemplateOutlet="menuTemplate; context: { $implicit: menuList }"
  ></ng-container>
  <ng-template #menuTemplate let-menuList>
    <ng-container *ngFor="let menu_1 of menuList">
      <li
        *ngIf="!menu_1?.children"
        nz-menu-item
        [nzSelected]="menu_1?.selected"
        (click)="handleRouting([menu_1?.path])"
      >
        <i *ngIf="menu_1?.icon" nz-icon [nzType]="menu_1?.icon"></i>
        {{ menu_1?.title }}
      </li>
      <li
        *ngIf="menu_1?.children"
        nz-submenu
        [nzTitle]="menu_1?.title"
        [nzIcon]="menu_1?.icon"
        [nzOpen]="menu_1?.selected"
      >
        <ng-container *ngFor="let menu_2 of menu_1?.children">
          <li
            *ngIf="!menu_2?.children"
            nz-menu-item
            [nzSelected]="menu_2?.selected"
            (click)="handleRouting([menu_2?.path])"
          >
            <i *ngIf="menu_2?.icon" nz-icon [nzType]="menu_2?.icon"></i>
            {{ menu_2.title }}
          </li>
          <li
            *ngIf="menu_2?.children"
            nz-submenu
            [nzTitle]="menu_2?.title"
            [nzIcon]="menu_2?.icon"
            [nzOpen]="menu_2?.selected"
          >
            <ng-container *ngFor="let menu_3 of menu_2?.children">
              <li nz-menu-item [nzSelected]="menu_3?.selected" (click)="handleRouting([menu_3?.path])">
                <i
                  *ngIf="menu_3?.icon"
                  nz-icon
                  [nzType]="menu_3?.icon"
                  
                ></i>
                {{ menu_3?.title }}
              </li>
            </ng-container>
          </li>
        </ng-container>
      </li>
    </ng-container>
  </ng-template>
</ul>
